<!-- 回到顶部按钮 -->
<button
  id="backToTop"
  class="fixed bottom-8 right-8 z-[9999] bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 flex items-center justify-center transform transition-all duration-300 translate-y-20 opacity-0"
  aria-label="回到顶部"
>
  <i class="fas fa-arrow-up"></i>
</button>

<script>
  // 回到顶部功能
  (function() {
    const backToTop = document.getElementById('backToTop');
    let lastScrollTop = 0;
    
    // 监听滚动事件
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      // 显示/隐藏按钮
      if (scrollTop > 300) {
        backToTop.classList.remove('translate-y-20', 'opacity-0');
        backToTop.classList.add('translate-y-0', 'opacity-100');
        
        // 向下滚动时额外添加的位移效果
        if (scrollTop > lastScrollTop) {
          backToTop.classList.add('translate-y-4');
        } else {
          backToTop.classList.remove('translate-y-4');
        }
      } else {
        backToTop.classList.add('translate-y-20', 'opacity-0');
        backToTop.classList.remove('translate-y-0', 'opacity-100');
      }
      
      lastScrollTop = scrollTop;
    });
    
    // 点击回到顶部
    backToTop.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  })();
</script> 